<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <style>
    /* 清除默认样式 */
    * {
      padding: 0;
      margin: 0;
    }

    /* 清除ul标签默认样式 */
    ul,
    ol {
      list-style: none;
    }

    /* 按钮样式 */
    input {
      position: absolute;
      top: 25px;
      left: 50%;
      width: 100px;
      height: 50px;
      margin-left: -50px;
    }

    /* 大盒子整体样式 */
    .box {
      /* 弹性布局 */
      display: flex;
      width: 512px;
      height: 384px;
      margin: 100px auto;
      border: 1px solid #000;
    }

    /* 让所有li平分剩余空间 */
    .box li {
      /* 旋转盒子相对定位 */
      position: relative;
      flex: 1;
      /* 开启3D视角 */
      perspective: 50000px;
      /* 保留子元素的3D坐标 */
      transform-style: preserve-3d;
      /* 过渡动画 */
      transition: all 1s ease;
    }

    /* 旋转盒子内部所有标签绝对定位，宽高等于父亲高度，设置背景图大小 */
    .box li div {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <!-- 大盒子 -->
  <ul class="box">
  </ul>
  <!-- 按钮 -->
  <input type="button" value="下一张">

  <!-- 引入jq文件 -->
  <script src="./js/jquery.min.js"></script>

  <script>
    // 创建变量比表示旋转盒子个数
    const num = 200,
      //  获取元素
      $box = $('.box'),
      width = $box.width(),
      height = $box.height()
    // 创建一个信号量。表示每次旋转度数
    let deg = 90,
      // 信号量，节流参数
      suo = false,
      //创建一个数组，容纳所有的旋转盒子
      li = []



    // 向数组中中添加盒子
    for (let i = 0; i < num; i++) {
      li.push(`<li class="list">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </li>`)
    }


    //把数字中所有盒子转字符串然后添加进大盒子，然后遍历所有旋转盒子
    $box.append($(li.join(''))).children().each(function (i) {
      // 设置所有旋转盒子的背景定位（依靠参数i），然后遍历四个面
      $(this).children('div').css('background-position', `-${ width / num * i}px 0`).each(function (i) {
        // 设置每个盒子的CSS属性
        $(this).css({
          // 背景图片，四个面使用不同的背景图片
          'background-image': `url(./img/${i+1}.png)`,
          // 设置四个面的3D效果，先旋转，再位移
          'transform': `rotateX(${i*90}deg) translateZ(${height / 2}px)`,
          // 设置所有面的背景图片大小
          'background-size': `${width}px ${height}px`
        })
      })
    })
    // 按钮添加点击事件
    $('input').click(function () {
      // 判断信号量，如果为true代表上锁，直接返回
      if (suo) {
        return
      }
      // 如果能执行到这里，说明没有上锁吗，那么把锁锁上
      suo = !suo
      // 设置一个延时器，1.3秒后打开锁
      setTimeout(function () {
        suo = !suo
      }, 1300)
      //旋转每个盒子
      $box.children().each(function (i) {
        $(this).css({
          // 旋转，并调用信号量，使用负值
          'transform': `rotateX(-${deg}deg)`,
          // 旋转盒子添加延时
          'transition-delay': `${0.001*i}s`
        })
      })
      // 修改信号量
      deg += 90
    })
  </script>
</body>

</html>